<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/";
%>
<html>
<head>
    <base href="<%=basePath%>">
    <!--引入jquery-->
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script type="text/javascript" src="jquery/echarts/echarts.min.js"></script>
    <title>线索统计图表</title>
    <script type="text/javascript">
        //发送查询请求
        $.ajax({
            url:'workbench/chart/transaction/queryCountOfTranGroupByStage2.do',
            type:'post',
            dataType:'json',
            success:function (data) {
        // 基于准备好的 DOM，初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '线索统计数据'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            xAxis: {
                type: 'category',
                data: data.map(item => item.name) // 假设数据对象有 stage 属性
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '线索数量',
                type: 'bar', // 指定图表类型为柱状图
                data: data,
                // data: [5, 20, 36, 10, 10, 20] // 示例数据，应替换为实际的线索数据
            }],
            };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
            }
        });
    </script>

</head>
<body>

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:500px;"></div>
</body>
</html>